:root {
  // use these to adjust global colors…
  --color-theme-dark: #0d7fa5;
  --color-theme-light: #cfe5ed;
  --color-contrast-light: #fff;
  --color-contrast-low: #555b5e;
  --color-contrast-dark: #3b4042;
  --color-accent-dark: #aa0e5c;
  --color-accent-light: #eac3d6;

  // use these for more control over how colors are used…
  --color-background: var(--color-contrast-light);
  --color-text: var(--color-contrast-dark);
  --color-text-light: var(--color-contrast-low);
  --color-sidebar-background: var(--color-theme-dark);
  --color-sidebar-text: var(--color-contrast-light);
  --color-action: var(--color-accent-dark);
  --color-focus: var(--color-theme-dark);
  --color-underline: var(--color-accent-light);
  --color-border: var(--color-callout);
  --color-callout: var(--color-theme-light);
  --color-callout-text: var(--color-text);
}